import EmptyTip from '@/components/EmptyTip';
import Icon from '@/components/Icon';
import Loading from '@/components/Loading/index';
import utils from '@/utils';
import { splitPrice } from '@/utils/customModule';
import { debounce } from '@/utils/helper.js';
import { ScrollView, View } from '@tarojs/components';
import React, { useMemo } from 'react';
import { connect } from 'react-redux';
import { ProductImg } from '../ProductImg';
import ProductTitle from '../ProductTitle';
import styles from './index.module.scss';
import { getDispatch } from '../../../dva';

const SplitPrice = ({ price }) => {
  const [priceLeft, priceRight] = splitPrice(price);

  return (
    <View className="sale-price customePageStyle">
      <View className="price-1">¥{priceLeft}</View>

      <View className="price-2">.{priceRight}</View>
    </View>
  );
};

const StandProductList = ({
  // 商品列表的 className
  className = '',
  // 商品列表的 style
  style,
  // 商品列表的 height
  height,

  // 商品列表
  list,
  // 商品列表是否加载完成
  isFinished,
  // 商品列表是否加载中, 如果isFinished是有值的, 那么只要没有结束, 就显示loading
  isLoading = isFinished === undefined ? undefined : !isFinished,
  // 商品列表触发下一页
  onNext,
  // 商品点击
  onClick = (product) => {
    const dispatch = getDispatch();
    utils.goGoodDetail(product, dispatch);
  },

  // 设置商品列表滚动高度
  scrollTop = 0,

  // 没有商品列表数据时显示内容, 支持 txt 或者 ReactElement
  emptyTip = <EmptyTip type="noSearch" />,
  // 当商品列表至少有多少个时, 底部end显示有底线的
  minListLen = 8,
  // 底部 loading 或者 end 显示
  bottomEle = <Loading loading={isLoading} finished={isFinished && list?.length >= minListLen} />,
  // 显示 购物车 图标
  cartEle = <Icon name="icon_add" className="goods-cart" size={44} />,
}) => {
  // 滚动获取
  const handleScrollToLower = debounce(() => {
    !isFinished && list?.length > 0 && onNext && onNext();
  }, 1200);

  const ele = useMemo(() => {
    if (typeof emptyTip === 'string') {
      return <View className={styles.Empty}>{emptyTip}</View>;
    }

    return emptyTip;
  }, [emptyTip]);

  return (
    <>
      {!!list?.length && (
        <ScrollView
          enableFlex
          scrollY
          className={`${styles.StandProductList} ${className}`}
          style={{ height, ...style }}
          onScrollToLower={handleScrollToLower}
          scrollTop={scrollTop}
        >
          <View className="goods-wrap">
            {list?.map((product) => {
              const { id, url, saleNum, price, scribingPrice, label, isSoldOut } = product;

              return (
                <View className="goods-item" key={id} onClick={() => onClick(product)}>
                  {label && (
                    <View className="goods-label customePageBackgroundStyle">
                      <View className="txt">{label}</View>
                    </View>
                  )}

                  <ProductImg className="goods-img-wrap" {...{ url, isSoldOut }} />

                  <View className="goods-panel goods-left-panel">
                    <ProductTitle {...{ product }} />

                    <View>
                      <View className="goods-sales">已售{saleNum ?? 0}件</View>

                      <View className="goods-line">
                        <View className="goods-price omit">
                          <SplitPrice price={price} />

                          {scribingPrice !== undefined && (
                            <View className="del-price">¥{scribingPrice}</View>
                          )}
                        </View>

                        {cartEle}
                      </View>
                    </View>
                  </View>
                </View>
              );
            })}
          </View>

          {bottomEle}
        </ScrollView>
      )}

      {isFinished && !list?.length && ele}
    </>
  );
};

export default connect(({}) => ({}))(StandProductList);
